<template>
	<view lang='layout'>
		<demo-child ref='child'></demo-child>
		<view class="">
			-------------

		</view>
		<button @click="update">点击修改count值</button>
		<scroll-view scroll-y="true" ref='scroll' class="scrollView">
			<view></view>
		</scroll-view>
		<view class="">
			计数器案例:{{count}}

		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	const child = ref(null)
	const update = function() {
		child.value.updateCount()

	}
	onMounted(() => {
		console.log(child.value)
	})
</script>
<script>
	export default {
		data() {
			return {
				count: 0,
				timer: null


			}
		},
		methods: {

		},
		onLoad(e) {
			console.log('这是demo5里面的onLoad函数')
			console.log(e)

		},
		beforeCreate() {},
		mounted() {


		},
		onReady() {
			// onReady表示页面的dom结构加载完毕,并且可以获取dom元素
			console.log('这是demo5页面的onReady函数')
			console.log(this.$refs.scroll)
		},
		onShow() {
			// onShow每次重新进入页面就会使用,onload使用一次加载之后就不会调用
			console.log('onShow')
			this.timer = setInterval(() => {
				this.count += 1
			}, 1000)


		},
		onHide() {
			console.log('onHide')
			clearInterval(this.timer)

		}
	}
</script>

<style>

</style>